<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>生命周期</h1>
      <p>{{count}}</p>
    </div>
    <script>
      /* 
      挂载阶段:
        * `【beforeMount】`: 挂载之前。此时视图呈现仍然是为被解析的Vue模板结构,在这个位置也不能操作DOM
        * 挂载：根据虚拟DOM创建真实DOM并替换指定的el所在位置
        *  `【!!!mounted】`:挂载之后,页面中呈现的是渲染成的真实DOM,我们一般在这个阶段进行初始化操作(初始化请求数据,初始化订阅,绑定自定义事件,开启定时器等等)
        
    */
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 0,
          };
        },
        beforeCreate() {
          console.log(".....beforeCreate.....", this, this.count);
          // debugger;
        },
        created() {
          console.log(".....created.....", this, this.count);
          // debugger;
        },
        beforeMount() {
          console.log("-----beforeMount------");
          // debugger;
        },
        mounted() {
          console.log("-----beforeMount------");
          // debugger;
        },
      });
    </script>
  </body>
</html>
